import React, {Component} from 'react';
import Toggle from './Toggle';
import {Page} from './Page';
import Blog from './Blog';
import NameForm from './NameForm';
import {Calculator} from './Calculator';
import {BlueDatePicker} from "./BlueDatePicker";
import {ListOfTenThings} from "./ListOfTenThings";
import './App.css';

function formatName(user) {
    return user.firstName + ' ' + user.lastName;
}

const user = {
    firstName: 'Harper',
    lastName: 'Perez'
}

function FormattedDate(props) {
    return <h2>It is {props.date.toLocaleTimeString()}</h2>
}

const Button = props=> {
    const {kind, ...other} = props;
    const className = kind === "primary" ? "PrimaryButton" : "SecondaryButton";
    return <button className={className} {...other}/>
}

const ArrayList = props=>{
    return [
        <li key="A">First Item</li>,
        <li key="B">Second Item</li>,
        <li key="C">Third Item</li>

    ]
}

function Item(props) {
    return <li>{props.message}</li>
}

function TodoList() {
    const messages = ["finish doc", "submit pr", "nag dan to review"];
    return (
        <ul>
            {messages.map((message)=><Item message={message} key={message}/>)}
        </ul>
    )
}

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            date: new Date()
        }
    }

    tick() {
        this.setState({
            date: new Date()
        })
    }

    componentDidMount() {
        console.log('mount')
        this.timerID = setInterval(
            () => this.tick(),
            1000
        )
    }

    componentWillUnmount() {
        console.log('unmount')
        clearInterval(this.timerID)
    }


    render() {
        const posts = [
            {id: 1, title: 'Hello World', content: 'Welcome to learn React'},
            {id: 2, title: 'Instailation', content: 'you can install from npm '}
        ];
        return (
            <div className="App">
                <header className="App-header">

                    <h1 className="App-title">投票列表</h1>
                </header>
                {formatName(user)}
                <FormattedDate date={this.state.date}/>
                <Toggle/>
                <Page/>
                <Blog posts={posts}/>
                <NameForm/>
                <Calculator/>
                <BlueDatePicker/>
                <Button kind="primary" onClick={()=>console.log("clicked.")}>
                    HelloWorld
                </Button>
                <ArrayList/>
                <TodoList/>
                <ListOfTenThings/>
            </div>

        );
    }
}

export default App;
